<template>
  <!--- 维护事项 -->
  <view v-if="listData.length > 0">
    <view class="grid-body mt-30" v-for="(item, index) in listData" :key="index">
      <view class="check grid-common">
        <view class="title flex">
          <text>{{ Number(index) + 1 > 9 ? Number(index) + 1 : `0${Number(index) + 1}` }}</text>
          <text class="tsk-name">{{ item.taskStatusLabel }}</text>
          <text class="tsk-time">{{ item.startTime }}</text>
        </view>
        <view class="flex text">
          <text class="text-label">任务名称：</text>
          <text> {{ item.taskName }}</text>
        </view>
        <view class="flex text"
          >任务编号：
          <text> {{ item.taskNumber }}</text>
        </view>
        <view class="flex text">
          <text class="text-label">维护保养设备：</text>
          <text>{{ item.deviceName }}</text>
        </view>
        <view class="flex text"
          >维护保养部门：
          <text>{{ item.deptLabel }}</text>
        </view>
        <view class="flex text"
          >维护保养人员：
          <text>{{ item.userIdLabel }}</text>
        </view>
        <view class="flex text"
          >维护保养截止时间：
          <text>{{ item.endTime }}</text>
        </view>
        <view class="flex text"
          >维护保养状态：
          <text>{{ item.userTaskStatusLabel }}</text>
        </view>
        <view class="footer-wrap">
          <view class="content-wrap"> </view>
          <view class="button-wrap">
            <button class="button" @click="goMatterReplace(item.id, 'READ')">查看</button>
            <button class="button button-orange" @click="goMatterReplace(item.id, ['EXECUTE', 'CONFIRM'][tabType])">
              {{ tabType ? '确认' : '执行' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-else>
    <empty></empty>
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import { itemWaitConfirm, itemWaitExecute } from '../../../../api/equipment/maintenance'
export default {
  name: 'pointCheck',
  components: {
    Empty
  },
  data() {
    return {
      tabType: 0,
      listData: [],
      pageNum: 1,
      pageSize: 10,
      total: null
    }
  },
  onLoad() {
    this.initData()
  },
  onPullDownRefresh() {
    // this.initData();
  },
  onShow() {
    this.initData()
  },
  onReachBottom() {
    this.pageNum++
    this.getList()
  },
  methods: {
    onfreshBottom(type) {
      this.pageNum++
      this.getList(type)
    },
    goMatterReplace(id, btnName) {
      let url = '/pages/work/intelligentPatrolInspection/maintenanceMatter/matterReplace?taskId=' + id
      url += `&operate=${btnName}`
      url += `&type=${this.tabType}`
      uni.navigateTo({
        url
      })
    },
    initData(type) {
      this.listData = []
      this.pageNum = 1
      this.total = null
      this.getList(type)
    },
    getList(type) {
      console.log('type', type)
      this.tabType = type
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      if (!this.total || this.total > this.listData.length) {
        let api = [itemWaitExecute, itemWaitConfirm]
        api[type](data)
          .then((res) => {
            if (this.pageNum === 1) {
              this.listData = res.rows
            } else {
              this.listData.push(...res.rows)
            }
            this.total = res.total
          })
          .finally(() => {
            uni.stopPullDownRefresh()
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-wrap {
  display: flex;
  background-color: #fff;

  view {
    position: relative;
    width: 35%;
    height: 38rpx;
    line-height: 38rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #999;
    text-align: right;
    margin-bottom: 32rpx;
  }

  .active {
    color: #333;

    &::after {
      content: '';
      position: absolute;
      right: 24rpx;
      bottom: -12rpx;
      height: 6rpx;
      width: 30rpx;
      background-color: #454a5e;
    }
  }
}

.grid-body {
  background-color: transparent;
}

.grid-common {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;

    .tsk-name {
      text-indent: 10rpx;
    }

    .tsk-time {
      position: absolute;
      right: 15px;
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;
    align-items: baseline;

    text {
      //width: 76%;
      color: #333;
      display: inline-block;

      &.text-grey {
        color: #999;
      }

      &.w-50 {
        width: 50%;
      }
    }
  }

  .text-label {
    word-break: keep-all;
    color: #999 !important;
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .bor-top {
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
